<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>EasyWeb后台开发框架</title>
		<link rel="stylesheet" href="../../assets/libs/layui/css/layui.css" />
		<link rel="stylesheet" href="../../assets/module/admin.css?v=315" />
		<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>

		<!-- 正文开始 -->
		<div class="layui-fluid">
			<div class="layui-card-body table-tool-mini">
				<div class="layui-form toolbar">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label w-auto">分&emsp;类：</label>
								<div class="layui-input-inline mr0">
									<select name="category" lay-verify="required">
										<option value="">选择分类</option>
										<option value="good">有效评论</option>
										<option value="bad">垃圾评论</option>
									</select>
								</div>
							</div>
							<div class="layui-inline" style="padding-right: 110px;">
								<button class="layui-btn icon-btn" lay-filter="formSubSearchUser" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
								<button type="reset" id="chongzhi" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>重置</button>
							</div>
						</div>
					</form>
				</div>

				<table class="layui-table" id="tableUser" lay-filter="tableUser"></table>
			</div>
			<!-- 统计图表 -->
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
					<div class="layui-card">
						<div class="layui-card-header">词云图</div>
						<div class="layui-card-body">
							<div id="tjDivWeek" style="height: 433px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- js部分 -->
		<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
		<script type="text/javascript" src="../../assets/js/common.js?v=315"></script>
		<script src="../../assets/libs/echarts/echarts.min.js"></script>
		<script src="../../assets/libs/echarts/echarts-wordcloud.js"></script>
		<script src="../../assets/libs/echarts/echartsTheme.js"></script>
		<script>
			layui.use(['layer', 'table', 'admin', 'form'], function() {
				var $ = layui.jquery;
				var layer = layui.layer;
				var table = layui.table;
				var admin = layui.admin;
				var form = layui.form;
				var myCharts2 = echarts.init(document.getElementById('tjDivWeek'), myEchartsTheme);

				// 搜索
				form.on('submit(formSubSearchUser)', function(data) {
					$.ajax({
						type: 'GET',
						url: 'http://127.0.0.1:5000/top',
						data: {
							'category': data.field.category
						},
						beforeSend: function(XMLHttpRequest) {
							//注意，layer.msg默认3秒自动关闭，如果数据加载耗时比较长，需要设置time
							loadingFlag = layer.msg('正在读取数据，请稍候……', {
								icon: 16,
								shade: 0.01,
								shadeClose: false,
								time: 60000
							});
						},
						success: function(res) {
							console.log('初始化')
							layer.close(loadingFlag);
							myCharts2.setOption({
								tooltip: {
									show: true
								},
								series: [{
									type: "wordCloud",
									gridSize: 6,
									shape: 'diamond',
									sizeRange: [12, 50],
									width: 800,
									height: 500,
									textStyle: {
										normal: {
											color: function() {
												return 'rgb(' + [
													Math.round(Math.random() * 160),
													Math.round(Math.random() * 160),
													Math.round(Math.random() * 160)
												].join(',') + ')';
											}
										},
										emphasis: {
											shadowBlur: 10,
											shadowColor: '#333'
										}
									},
									data: res.data,
								}]
							});
						}
					});
					form.render();
					return false;
				});
				$('#chongzhi').click(init)
				init();

				function init() {
					form.render();
					$.ajax({
						type: 'GET',
						url: 'http://127.0.0.1:5000/top',
						beforeSend: function(XMLHttpRequest) {
							//注意，layer.msg默认3秒自动关闭，如果数据加载耗时比较长，需要设置time
							loadingFlag = layer.msg('正在读取数据，请稍候……', {
								icon: 16,
								shade: 0.01,
								shadeClose: false,
								time: 60000
							});
						},
						success: function(res) {
							console.log('初始化')
							layer.close(loadingFlag);
							myCharts2.setOption({
								tooltip: {
									show: true
								},
								series: [{
									type: "wordCloud",
									gridSize: 6,
									shape: 'diamond',
									sizeRange: [12, 50],
									width: 800,
									height: 500,
									textStyle: {
										normal: {
											color: function() {
												return 'rgb(' + [
													Math.round(Math.random() * 160),
													Math.round(Math.random() * 160),
													Math.round(Math.random() * 160)
												].join(',') + ')';
											}
										},
										emphasis: {
											shadowBlur: 10,
											shadowColor: '#333'
										}
									},
									data: res.data,
								}]
							});
						}
					});
				}

				// 窗口大小改变事件
				window.onresize = function() {
					myCharts1.resize();
				};

			});
		</script>
	</body>

</html>